<template>
  <view class="forget-container">
    <!-- 手机号输入区域 -->
    <view class="phone-input-area">
      <input
        class="phone-input"
        type="number"
        maxlength="11"
        placeholder="请输入手机号"
        v-model="phoneNumber"
        @input="validatePhoneNumber"
      />
    </view>

    <!-- 验证码输入区域 -->
    <view class="verify-code-area">
      <input
        class="verify-code-input"
        type="number"
        maxlength="6"
        placeholder="请输入验证码"
        v-model="verifyCode"
      />
      <view class="verify-code-btn" @tap="getVerifyCode" v-if="!counting">
        <text>发送验证码</text>
      </view>
      <view class="verify-code-btn counting" v-else>
        <text>{{ countdown }}s</text>
      </view>
    </view>

    <!-- 新密码输入区域 -->
    <view class="password-input-area">
      <input
        class="password-input"
        :password="showPassword"
        placeholder="请输入新密码"
        v-model="newPassword"
      />
      <view class="eye-icon"style="background: none" @tap="togglePasswordVisibility">
        <gui-image
          :width="40"
          :height="40"
          :src="
            showPassword
              ? 'https://cphimg.leyoo888.com/dev/upload/supplier/2025-04-29/1968035d9622a20c.png?x-oss-process=style/yasuo25'
              : 'https://cphimg.leyoo888.com/dev/upload/supplier/2025-04-29/1968035cac02c0c6.png?x-oss-process=style/yasuo25'
          "
          alt="切换密码显示"
        />
      </view>
    </view>

    <!-- 确定按钮 -->
    <button class="confirm-btn" @tap="resetPasswordData">确定</button>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import {
  getSupplierPhoneCode,
  getStorePhoneCode,
  resetPasswordSupplier,
  resetPasswordStore,
} from "@/api/login.js";
import { showToast } from "@/utils/helper";
import { onLoad, onUnload } from "@dcloudio/uni-app";

const {
  proxy: { $forceUpdate },
} = getCurrentInstance();
// 定义响应式数据
const phoneNumber = ref("");
const verifyCode = ref("");
const newPassword = ref("");
const showPassword = ref(false);
const counting = ref(false);
const countdown = ref(60);
let timer = null;

// 验证手机号
const validatePhoneNumber = () => {
  // 限制只能输入数字
  phoneNumber.value = phoneNumber.value.replace(/\D/g, "");

  // 限制最大长度为11位
  if (phoneNumber.value.length > 11) {
    phoneNumber.value = phoneNumber.value.slice(0, 11);
  }
};

// 获取验证码
const getVerifyCode = () => {
  if (phoneNumber.value.length !== 11) {
    showToast("请输入正确的手机号");
    return;
  }

  // 开始倒计时
  startCountdown();
  type.value === "supplier"
    ? getSupplierPhoneCode({
        mobile: phoneNumber.value,
        type: 3,
      }).then((res) => {
        showToast("验证码发送成功，请注意查收");
      })
    : getStorePhoneCode({
        mobile: phoneNumber.value,
        type: 3,
      }).then((res) => {
        showToast("验证码发送成功，请注意查收");
      });
};

// 开始倒计时
const startCountdown = () => {
  counting.value = true;
  countdown.value = 60;

  clearInterval(timer); // 清除可能存在的旧定时器

  timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
      counting.value = false;
    }
  }, 1000);
};

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
  $forceUpdate();
};

// 重置密码
const resetPasswordData = () => {
  // 非空验证
  if (phoneNumber.value.length !== 11) {
    uni.showToast({
      title: "请输入11位手机号码",
      icon: "none",
    });
    return;
  }

  if (verifyCode.value.length !== 6) {
    uni.showToast({
      title: "请输入6位验证码",
      icon: "none",
    });
    return;
  }

  if (!newPassword.value) {
    uni.showToast({
      title: "请输入新密码",
      icon: "none",
    });
    return;
  }
  type.value === "supplier"
    ? resetPasswordSupplier({
        code: verifyCode.value,
        mobile: phoneNumber.value,
        password: newPassword.value,
      }).then((res) => {
        Success();
      })
    : resetPasswordStore({
        code: verifyCode.value,
        mobile: phoneNumber.value,
        password: newPassword.value,
      }).then((res) => {
        Success();
      });
};
const Success = () => {
  showToast("密码重置成功", "success");
  // 重置成功后跳转到登录页
  setTimeout(() => {
    uni.navigateBack();
  }, 800);
};
// 组件销毁时清除定时器
onUnload(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
const type = ref("supplier");
onLoad((options) => {
  if (options.type) {
    type.value = options.type;
  }
});
</script>

<style lang="scss" scoped>
.forget-container {
  padding: 30rpx;
}

.phone-input-area {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20rpx;
  margin-bottom: 30rpx;

  .country-code {
    display: flex;
    align-items: center;
    color: #3399ff;
    font-size: 30rpx;
    padding-right: 20rpx;

    .arrow-down {
      font-size: 24rpx;
      margin-left: 8rpx;
    }
  }

  .phone-input {
    flex: 1;
    height: 80rpx;
    font-size: 30rpx;
  }
}

.verify-code-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20rpx;
  margin-bottom: 30rpx;

  .verify-code-input {
    flex: 1;
    height: 80rpx;
    font-size: 30rpx;
  }

  .verify-code-btn {
    min-width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background-color: #3399ff;
    color: #fff;
    font-size: 28rpx;
    border-radius: 6rpx;

    &.counting {
      background-color: #cccccc;
    }
  }
}

.password-input-area {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20rpx;
  margin-bottom: 50rpx;

  .password-input {
    flex: 1;
    height: 80rpx;
    font-size: 30rpx;
  }

  .eye-icon {
    padding: 0 20rpx;
    font-size: 32rpx;
    color: #999;
  }
}

.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #f55054;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-bottom: 50rpx;
  border: none;
}

.rules-container {
  padding: 20rpx 0;

  .rule-item {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20rpx;

    view {
      margin-top: 8rpx;
      padding-left: 20rpx;
    }
  }
}
</style>
